<template>
  <basic-container>
    <avue-crud ref="crud"
      v-model:page="page"
      :permission="permissionList"
      :table-loading="tableLoading"
      :data="tableData"
      :option="tableOption"
      @on-load="getList"
      @row-save="handleSave"
      @row-update="handleUpdate"
      @row-del="handleDel"
      @size-change="sizeChange"
      @current-change="currentChange"
      @search-change="searchChange"
      @refresh-change="refreshChange"
      :before-open="beforeOpen"
      :before-close="beforeClose">
      <template slot="status" slot-scope="scope">
        <el-tag :type="scope.row.status=='1'?'success':'danger'">{{ scope.label }}</el-tag>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
    import {mapGetters} from 'vuex'
    import {tableOption} from './param.js'
    import {fetchList, getObj, addObj, putObj, delObj} from '@/api/admin/param'


    export default {
        name: 'param1',
        data() {
            return {
                searchForm: {},
                tableLoading: false,
                tableOption: tableOption,
                tableData: [],
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
            }
        },
        computed: {
            ...mapGetters(['permission']),
            permissionList() {
                return {
                    addBtn: this.validData(this.permission.sys_param_add, false),
                    delBtn: this.validData(this.permission.sys_param_del, false),
                    editBtn: this.validData(this.permission.sys_param_edit, false)
                };
            }
        },
        methods: {
            getList(page, params) {
                this.tableLoading = true
                fetchList(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params, this.searchForm )).then(response => {
                    this.tableData = response.data.data.records
                    this.page.total = response.data.data.total
                    this.tableLoading = false
                }).catch(() => {
                    this.tableLoading=false
                })
            },
            handleSave: function (row, done,loading) {
                addObj(row).then(data => {
                    this.$message.success('添加成功')
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading();
                });
            },
            handleUpdate: function (row, index, done,loading) {
                putObj(row).then(data => {
                    this.$message.success('修改成功')
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading();
                });
            },
            handleDel: function (row, index) {
                this.$confirm('是否确认删除ID为' + row.id, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    return delObj(row.id)
                }).then(data => {
                    this.$message.success('删除成功')
                    this.getList(this.page)
                })
            },
            sizeChange(pageSize){
                this.page.pageSize = pageSize
            },
            currentChange(current){
                this.page.currentPage = current
            },
            searchChange(form, done) {
                this.searchForm = form
                this.page.currentPage = 1
                this.getList(this.page, form)
                done()
            },
            refreshChange() {
                this.getList(this.page)
            },
            beforeOpen: function(show, type) {
                show();
            },
            beforeClose: function(done, type) {
                done();
            },

        }
    }
</script>
